<template>
  <el-cascader ref="areaSelect" v-model="props.value" :options="options" :props="{ checkStrictly: false }"
               style="width: 100%" @change="handleChange"></el-cascader>
</template>

<script lang="ts" setup>
import fiveLevelAddress from '@/static/five-level-address.json'

const options = ref<any>(fiveLevelAddress)

const emits = defineEmits(['handleChange'])

// const value = ref()

const props = defineProps({
  value: String
})
const handleChange = (value: any) => {
  if (value) {
    // 省
    const economize = translate(options.value, value[0])
    // 市
    const city = translate(economize.children, value[1])
    // 县/区
    const county = translate(city.children, value[2])
    // 镇
    const townlet = translate(county.children, value[3])
    let obj = {
      economize: {"label": economize.label, "value": economize.value},
      city: {"label": city.label, "value": city.value},
      county: {"label": county.label, "value": county.value},
      townlet: {"label": townlet.label, "value": townlet.value}
    }
    emits('handleChange', obj)
  }
}

function translate(options: any, value: String) {
  for (let i = 0; i < options.length; i++) {
    if (value === options[i].value) {
      return options[i]
    }
  }
}
</script>

<script lang="ts">
export default {
  name: "levelAddress"
}
</script>
